'use client';

import { useContext, useState } from "react";
import EditableInput from "./EditableInput";
import { Menu, MenuButton, MenuItem, MenuList, useBoolean } from "@chakra-ui/react";
import { MainContext } from "@/src/providers/MainProvider";

function EditItem({name, onChange = () => {}, onDelete = () => {}}:{name: string, onChange?: (value: string) => void, onDelete?: () => void}) {

    const [edit, setEdit] = useBoolean()
    const finishEdit = (value: string) => {
        setEdit.off();
        onChange(value);
    }
    const {t} = useContext(MainContext);

    return (
        <>
            <EditableInput value={name} isEditMode={edit} startEdit={setEdit.on} finishEdit={finishEdit}/>
            <Menu>
                <MenuButton className=" hover:cursor-context-menu">
                <svg className="w-5" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26745" width="32" height="32"><path d="M512 128c-46.933333 0-85.333333 38.4-85.333333 85.333333s38.4 85.333333 85.333333 85.333334 85.333333-38.4 85.333333-85.333334-38.4-85.333333-85.333333-85.333333z m0 597.333333c-46.933333 0-85.333333 38.4-85.333333 85.333334s38.4 85.333333 85.333333 85.333333 85.333333-38.4 85.333333-85.333333-38.4-85.333333-85.333333-85.333334z m0-298.666666c-46.933333 0-85.333333 38.4-85.333333 85.333333s38.4 85.333333 85.333333 85.333333 85.333333-38.4 85.333333-85.333333-38.4-85.333333-85.333333-85.333333z" p-id="26746" fill="#aaaaaa"></path></svg>
                </MenuButton>
                <MenuList minW={"5rem"} p={0} overflow={"hidden"} className="font-normal text-md !text-gray-800">
                    <MenuItem onClick={() => setEdit.on()}>{t("506")}</MenuItem>
                    <MenuItem onClick={() => onDelete && onDelete()}>{t("505")}</MenuItem>
                </MenuList>
            </Menu>
        </>
    );
}

export default EditItem;